<!DOCTYPE html>
<html>
<head>
	<title>Product</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
	<!--theme-style-->
	<link href="/css/style.css" rel="stylesheet" type="text/css" media="all" />
	<!--//theme-style-->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
	<!--fonts-->
	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
	<!--//fonts-->
	<script src="/js/jquery.min.js"></script>

	<script src="/js/jquery.easydropdown.js"></script>
	<script src="/js/vue.js"></script>

	<!--script-->
</head>
<body>
<!--header-->
<div class="header">
	<div class="top-header">
		<div class="container">
			<div class="top-header-left">
				<ul class="support">
					<li><a href="#"><label></label></a></li>
					<li id="loginInfo"><a href="#">请登录</a></li>
				</ul>
				<ul class="support">
					<li class="van"><a href="#"><label> </label></a></li>
					<li><a href="#">简单购物<span class="live">就在运动圈</span></a></li>
				</ul>
				<div class="clearfix"> </div>
			</div>
			<div class="top-header-right">
				<div class="down-top">
					<a href="" class="label">我的收藏</a>
				</div>
				<div class="down-top top-down">

					<a href="" class="label">我的订单</a>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	<div class="bottom-header">
		<div class="container">
			<div class="header-bottom-left">
				<div class="logo">
					<a href="mall_index.html"><img src="/images/logo.png" alt=" " /></a>
				</div>
				<div class="search">
					<input type="text" value="" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}" >
					<input type="submit"  value="SEARCH">

				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="header-bottom-right">
				<ul class="men-grid">
					<!--<li><a href="login.html"><span> </span>YOUR ACCOUNT</a></li>-->
					<li class="login" id="login"><a href="/page/front_page/admin/login.htm"><span> </span>登陆</a>|</li>
					<li class="cart"><a href="/page/front_page/mall/mall_cart.html"><span> </span>购物车</a></li>
				</ul>
				<div class="sign-up-right" id="register">
					<a href="/page/front_page/admin/register.html">注册</a>
				</div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
</div>
<!---->
<!-- start content -->
<div class="container">

	<div class="women-product">
		<div class=" w_content">
			<div class="women" id="totalCount">
				<a href="#"><h4>共有 - <span>4449 个商品</span> </h4></a>
				<ul class="w_nav">
					<li>Sort : </li>
					<li><a class="active" href="#">流行</a></li> |
					<li><a href="#">新的 </a></li> |
					<li><a href="#">折扣</a></li> |
					<li><a href="#">价位: Low High </a></li>
					<div class="clearfix"> </div>
				</ul>
				<div class="clearfix"> </div>
			</div>
		</div>
		<!-- grids_of_4 -->
		<div class="grid-product" id="selectBasketballShoe">
		<span v-for="basketballshoe in list">
		  <div class="product-grid">
			<div class="content_box">
				<a :href="'mall_detail.html?id='+basketballshoe.id">
			   	<div class="left-grid-view grid-view-left">
			   	   	 <img :src="basketballshoe.extension3" class="img-responsive watch-right" alt=""/>
				   	   	<div class="mask">
	                        <div class="info">Quick View</div>
			            </div>

				</div>
				</a>
				    <h4><a href="#">{{basketballshoe.name}}</a></h4>
				     <p>It is a long established fact that a reader</p>
				     ￥. {{basketballshoe.price}}
			   	</div>
              </div>
		</span>





			<div class="clearfix"> </div>
		</div>
	</div>
	<div class="sub-cate">
		<div class=" top-nav rsidebar span_1_of_left">
			<h3 class="cate">分类</h3>
			<ul class="menu">
				<li class="item1" id="selectShoe"><a href="#">鞋子<img class="arrow-img" src="/images/arrow1.png" alt=""/> </a>
					<ul class="cute">
						<li v-for="(shoe,i) in list" class='subitem"+(i+1)+"'><a :href="'mall_list.html?categoryLevel2Id='+shoe.id">{{shoe.name}}</a></li>
						<!--<li class="subitem1"><a href="mall_list3.html">休闲鞋</a></li>
                        <li class="subitem2"><a href="mall_list3.html">跑鞋</a></li>
                        <li class="subitem3"><a href="mall_list3.html">篮球鞋</a></li>-->
					</ul>
				</li>
				<li class="item2" id="selectUpper"><a href="#">上衣<img class="arrow-img " src="/images/arrow1.png" alt=""/></a>
					<ul class="cute">
						<li v-for="(upper,i) in list" class='subitem"+(i+1)+"'><a :href="'mall_list.html?categoryLevel2Id='+upper.id">{{upper.name}}</a></li>
						<!--<li class="subitem2"><a href="mall_list.html">运动短袖</a></li>
                        <li class="subitem3"><a href="mall_list.html">夹克</a></li>-->
					</ul>
				</li>
				<li class="item3" id="selectPants"><a href="#">裤子<img class="arrow-img img-arrow" src="/images/arrow1.png" alt=""/> </a>
					<ul class="cute">
						<li v-for="(pants,i) in list" class='subitem"+(i+1)+"'><a :href="'mall_list.html?categoryLevel2Id='+pants.id">{{pants.name}}</a></li>
						<!--<li class="subitem2"><a href="mall_list.html">篮球裤</a></li>
                        <li class="subitem3"><a href="mall_list.html">运动裤</a></li>-->
					</ul>
				</li>
				<li class="item4" id="selectBasketball"><a href="#">篮球<img class="arrow-img img-left-arrow" src="/images/arrow1.png" alt=""/></a>
					<ul class="cute">
						<li v-for="(basketball,i) in list" class='subitem"+(i+1)+"'><a :href="'mall_list.html?categoryLevel2Id='+basketball.id">{{basketball.name}}</a></li>
						<!--<li class="subitem1"><a href="mall_list.html">篮球配件</a></li>
                        <li class="subitem2"><a href="mall_list.html">双肩背包</a></li>
                        <li class="subitem3"><a href="mall_list.html">篮球</a></li>-->
					</ul>
				</li>
				<!--	<li>
                <ul class="kid-menu">
                    <li><a href="mall_list.html">Tempus pretium</a></li>
                    <li ><a href="mall_list.html">Dignissim neque</a></li>
                    <li ><a href="mall_list.html">Ornared id aliquet</a></li>
                </ul>
            </li>
            <ul class="kid-menu ">
                    <li><a href="mall_list.html">Commodo sit</a></li>
                    <li ><a href="mall_list.html">Urna ac tortor sc</a></li>
                    <li><a href="mall_list.html">Ornared id aliquet</a></li>
                    <li><a href="mall_list.html">Urna ac tortor sc</a></li>
                    <li ><a href="mall_list.html">Eget nisi laoreet</a></li>
                    <li><a href="mall_list.html">Faciisis ornare</a></li>
                    <li class="menu-kid-left"><a href="contact.html">Contact us</a></li>
                </ul>-->
			</ul>
		</div>
		<!--initiate accordion-->
		<script type="text/javascript">
            $(function() {
                var menu_ul = $('.menu > li > ul'),
                    menu_a  = $('.menu > li > a');
                menu_ul.hide();
                menu_a.click(function(e) {
                    e.preventDefault();
                    if(!$(this).hasClass('active')) {
                        menu_a.removeClass('active');
                        menu_ul.filter(':visible').slideUp('normal');
                        $(this).addClass('active').next().stop(true,true).slideDown('normal');
                    } else {
                        $(this).removeClass('active');
                        $(this).next().stop(true,true).slideUp('normal');
                    }
                });

            });
		</script>
		<div class=" chain-grid menu-chain">
			<a href="single.html"><img class="img-responsive chain" src="/images/wat.jpg" alt=" " /></a>
			<div class="grid-chain-bottom chain-watch">
				<span class="actual dolor-left-grid">300$</span>
				<span class="reducedfrom">500$</span>
				<h6>Lorem ipsum dolor</h6>
			</div>
		</div>
		<a class="view-all all-product" href="mall_list.html">VIEW ALL PRODUCTS<span> </span></a>
	</div>
	<div class="clearfix"> </div>
</div>
</div>
<!---->
<!--<div class="footer">
    <div class="footer-top">
        <div class="container">
            <div class="latter">
                <h6>NEWS-LATTER</h6>
                <div class="sub-left-right">
                    <form>
                        <input type="text" value="Enter email here"onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Enter email here';}" />
                        <input type="submit" value="SUBSCRIBE" />
                    </form>
                </div>
                <div class="clearfix"> </div>
            </div>
            <div class="latter-right">
                <p>FOLLOW US</p>
                <ul class="face-in-to">
                    <li><a href="#"><span> </span></a></li>
                    <li><a href="#"><span class="facebook-in"> </span></a></li>
                    <div class="clearfix"> </div>
                </ul>
                <div class="clearfix"> </div>
            </div>
            <div class="clearfix"> </div>
        </div>
    </div>
    <div class="footer-bottom">
        <div class="container">
            <div class="footer-bottom-cate">
                <h6>CATEGORIES</h6>
                <ul>
                    <li><a href="#">Curabitur sapien</a></li>
                    <li><a href="#">Dignissim purus</a></li>
                    <li><a href="#">Tempus pretium</a></li>
                    <li ><a href="#">Dignissim neque</a></li>
                    <li ><a href="#">Ornared id aliquet</a></li>
                    <li><a href="#">Ultrices id du</a></li>
                    <li><a href="#">Commodo sit</a></li>
                    <li ><a href="#">Urna ac tortor sc</a></li>
                    <li><a href="#">Ornared id aliquet</a></li>
                    <li><a href="#">Urna ac tortor sc</a></li>
                    <li ><a href="#">Eget nisi laoreet</a></li>
                    <li ><a href="#">Faciisis ornare</a></li>
                </ul>
            </div>
            <div class="footer-bottom-cate bottom-grid-cat">
                <h6>FEATURE PROJECTS</h6>
                <ul>
                    <li><a href="#">Curabitur sapien</a></li>
                    <li><a href="#">Dignissim purus</a></li>
                    <li><a href="#">Tempus pretium</a></li>
                    <li ><a href="#">Dignissim neque</a></li>
                    <li ><a href="#">Ornared id aliquet</a></li>
                    <li><a href="#">Ultrices id du</a></li>
                    <li><a href="#">Commodo sit</a></li>
                </ul>
            </div>
            <div class="footer-bottom-cate">
                <h6>TOP BRANDS</h6>
                <ul>
                    <li><a href="#">Curabitur sapien</a></li>
                    <li><a href="#">Dignissim purus</a></li>
                    <li><a href="#">Tempus pretium</a></li>
                    <li ><a href="#">Dignissim neque</a></li>
                    <li ><a href="#">Ornared id aliquet</a></li>
                    <li><a href="#">Ultrices id du</a></li>
                    <li><a href="#">Commodo sit</a></li>
                    <li ><a href="#">Urna ac tortor sc</a></li>
                    <li><a href="#">Ornared id aliquet</a></li>
                    <li><a href="#">Urna ac tortor sc</a></li>
                    <li ><a href="#">Eget nisi laoreet</a></li>
                    <li ><a href="#">Faciisis ornare</a></li>
                </ul>
            </div>
            <div class="footer-bottom-cate cate-bottom">
                <h6>OUR ADDERSS</h6>
                <ul>
                    <li>Aliquam metus  dui. </li>
                    <li>orci, ornareidquet</li>
                    <li> ut,DUI.</li>
                    <li >nisi, dignissim</li>
                    <li >gravida at.</li>
                    <li class="phone">PH : 6985792466</li>
                    <li class="temp"> <p class="footer-class">Copyright &copy; 2015.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p></li>
                </ul>
            </div>
            <div class="clearfix"> </div>
        </div>
    </div>
</div>-->
<script>
    var selectShoe = new Vue({
        el:'#selectShoe',
        data:{
            list:{}
        },
        mounted:function (){
            $.getJSON('/mallproductcategory/selectCateforyByParentId.json',{parentId:1},function(data){
                selectShoe.list=data;
            });
        }
    });
    var selectUpper = new Vue({
        el:'#selectUpper',
        data:{
            list:{}
        },
        mounted:function (){
            $.getJSON('/mallproductcategory/selectCateforyByParentId.json',{parentId:2},function(data){
                selectUpper.list=data;
            });
        }
    });

    var selectPants = new Vue({
        el:'#selectPants',
        data:{
            list:{}
        },
        mounted:function (){
            $.getJSON('/mallproductcategory/selectCateforyByParentId.json',{parentId:3},function(data){
                selectPants.list=data;
            });
        }
    });

    var selectBasketball = new Vue({
        el:'#selectBasketball',
        data:{
            list:{}
        },
        mounted:function (){
            $.getJSON('/mallproductcategory/selectCateforyByParentId.json',{parentId:4},function(data){
                selectBasketball.list=data;
            });
        }
    });

    //根据二级分类查询商品
    var str = location.href;
    var param = str.substring(str.lastIndexOf("?")+1);


    var selectBasketballShoe = new Vue({
        el:'#selectBasketballShoe',
        data:{
            list:{}
        },
        mounted:function () {
            $.getJSON('/mallproduct/selectProductByCategoryLevel2Id.json',param,function(data){
                selectBasketballShoe.list=data;
            });
        }
    });
    $(function () {
        $.post("/isLogin/islogin.json","",function (map) {
            if (map==null||map==""){
                return;
            }
            $("#loginInfo a").text("欢迎您，"+map.mobile);
            $("#register").hide();
            $("#login").hide();
        });
    });

/*    var totalCount = new Vue({
		el:'#totalCount',
		data:{
		    list:{}
		},
		mounted:function () {
			$.getJSON("/mallproduct/queryByPage.json",param,function (page) {
				alert(page.totalCount);
            });
        }
	});*/
</script>
</body>
</html>